﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>创建主机和板卡</title>
	<link rel="stylesheet" href="./css/css.css">
	<link rel="stylesheet" href="./css/leftBar.css">
	<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
	<link type="text/css" rel="Stylesheet" href="./css/nmc.css" />
	<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="./js/messagecenter.js"></script>
	<script type="text/javascript" src="./js/common.js"></script>
	<script type="text/javascript" src="./js/data3.js"></script>
	<script type="text/javascript" src="./js/canvas3.js"></script>
	<style type="text/css">
		.app_text{
			color:#04A0E9;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}

	</style>
	<script>
        window.onload = function() {};
        function lineEvent1(){}
        function lineEvent2(){}
        function lineEvent3(){}
        function  iconEvent4(obj){
			$(".editPOP").hide();
            var id = obj.machineBox.id;
            if(!id){
                alert("请先执行保存");
                return false;
			}
			$("#id").val(id);
			$("#topId").val('[[${id}]]');
			$("#form1").attr({action:'[[@{/newCpus}]]',method:"GET"}).submit();
        }
        /*
        *	删除level2元素
        */
        function deleteLevel2(){
        	if(curindex != -1){
        		if(deleteLevel == 2){
        			//把level2s数据中 下角标为curindex 的数据删除 
        			var id = canvasAllLevel2[curindex].board.id;
        			if(id){
        				var delUrl = "[[@{/board/delete}]]";
        				$.ajax({url:delUrl,
        		        	data:{id:id},
        		        	dataType:"JSON",
        		        	ContentType: "application/x-www-form-urlencoded",
        		        	type:"POST"
        		        }).done(function(data){
        		        	deleteOneLevel2(curindex , deleteCpu.pIndex);
        		        	cancelChoose();
        		        });
        			}else{
            			deleteOneLevel2(curindex , deleteCpu.pIndex);
        			}
        			
        			//并且重新定位其他元素
        		}else if(deleteLevel == 1){
        			//删除某主机 并且把这个主机下所有的板卡都删掉 如果删除的是第一个主机 判断是否有第二个主机 重新计算第二个主机的位置 还有第二个主机下所有板卡的位置
        			//把level2s数据中 下角标为curindex 的数据删除 
        			var id = canvasAllLevel1[curindex].machineBox.id;
        			if(id){ 
        				var delUrl = "[[@{/machinebox/delete}]]";
        				$.ajax({url:delUrl,
        		        	data:{id:id},
        		        	dataType:"JSON",
        		        	ContentType: "application/x-www-form-urlencoded",
        		        	type:"POST"
        		        }).done(function(data){
        		        	deleteOneLevel1(curindex , deleteCpu.pIndex);
        		        	cancelChoose();
        		        	drawCircles();
        		        	$("#bottom4").hide();
        		        });
        			}else{
        				deleteOneLevel1(curindex , deleteCpu.pIndex);
        				drawCircles();
        			}
        			
        		}
        	}
        	drawCircles();
        }
        
	</script>
</head>
<body>
<div class="rightKey shadow">
	<div class="rk1" onclick="deleteLevel2();">删除</div>
</div>
<div class="left_content">
	<div class="left_block1">
		<div class="left_logo"></div>
		<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
		<div class="left_icons">
			<div class="left_icon1"></div>
			<div class="left_icon2"></div>
			<div class="left_icon3"></div>
		</div>
	</div>
	<div class="left_block2">
		<div class="left_menu" onclick="window.location.href='physical_topology_library';" style="background-color:#04A0E9;color:#FFFFFF;border-top:1px solid #FFFFFF;">拓扑文件库</div>
		<div class="left_menu" onclick="window.location.href='logical_application_library';">逻辑预案库</div>
		<div class="left_menu" onclick="window.location.href='deploy_topology_library';">部署库</div>
		<div class="left_menu monitor">监控</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='physical_monitors';">
				物理监控
			</div>
		</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='logical_monitors';">
				逻辑监控
			</div>
		</div>
		<div class="left_menu other">其他</div>
		<div class="left_menu  level22" >
			<div class="level22Border" onclick="window.location.href='commonCMD';">
				我的常用命令
			</div>
		</div>
		<div class="left_menu level22" >
			<div class="level22Border" onclick="window.location.href='generalCMD';">
				命令模板
			</div>
		</div>
	</div>
	<form th:action="@{/logout}" method="post" >
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="bigmoniter" type="button" onclick="showBig();" style="cursor:pointer;">大屏监控</button>
			<button class="login"  type="submit">注销</button>
		</div>
	</form>
</div>
<div class="editPOP"></div>
<div class="right_content" >
	<form id="form1">
		<input type="hidden" id="curId" name="curId">
		<input type="hidden" id="id" name="id">
		<input type="hidden" id="pId" name="pId">
		<input type="hidden" id="topId" name="topId">
		<input type="hidden"  name="returnUrl" id="returnUrl">
		<input type="hidden"  name="name" id="name">
		<!-- 头部 -->
		<div class="top-bar" style="right:120px;">
			<button class="b4" type="button" onclick="nextStep();" style="width:95px;line-height: 30px;">绑定物理链路</button>
			<button class="b5" type="button" onclick="showView();">预览</button>
			<button  class="b6" type="button" onclick="back();">返回</button>
		</div>


		<!-- 右侧 -->
		<div class="right">
			<div class="r0 app_text">APP</div>
		</div>
		<!-- 左侧 -->
		<div class="table-box">

		</div>
		<!-- 底部 -->
		<!-- 新增板卡 -->
		<div class="bottom" style="display:none;" id="bottom3">
			<div class="btm-bar">
				<div class="bar1">属性</div>
			</div>
			<div class="bt2">
				<div>编号&nbsp;:</div>
				<div><input type="text" id="boardId" placeholder="输入编号"/></div>
			</div>
			<div class="bt3">
				<div>名称&nbsp;:</div>
				<div><input type="text" id="boardName" placeholder="输入名称"></div>
			</div>
			<div class="bt4">
				<div>类型&nbsp;:</div>
				<div style="margin-left:20px;">
					<select style="width:100px;border:none;color:#434C55;" id="boardType">
						<option value="0">选择类型</option>
						<option value="1">主控制板</option>
						<option value="2">主交换板</option>
						<option value="3">备交换板</option>
						<option value="4">备控制板</option>
						<option value="5">处理板</option>
					</select>
				</div>
			</div>
			<button class="b6" type="button" onclick="dissave();" style="margin-right:100px;">取消</button>
			<button  id="saveNewBoard" class="b6" type="button" >保存</button>
		</div>
		<!-- 编辑板卡 -->
		<div class="bottom" style="display:none;" id="bottom1">
			<div class="btm-bar">
				<div class="bar1">属性</div>
			</div>
			<div class="bt2">
				<div>编号&nbsp;:</div>
				<div><input type="text" id="boardId2" placeholder="输入编号"/></div>
			</div>
			<div class="bt3">
				<div>名称&nbsp;:</div>
				<div><input type="text" id="boardName2" placeholder="输入名称"></div>
			</div>
			<div class="bt4">
				<div>类型&nbsp;:</div>
				<div style="margin-left:20px;">
					<select style="width:100px;border:none;color:#434C55;" id="boardType2">
						<option value="0">选择类型</option>
						<option value="1">主控制板</option>
						<option value="2">主交换板</option>
						<option value="3">备交换板</option>
						<option value="4">备控制板</option>
						<option value="5">处理板</option>
					</select>
				</div>
			</div>
			
			<button class="b6" type="button" onclick="dissave();" style="margin-right:100px;">取消</button>
			<button  id="saveMachineOrCpus" class="b6" type="button" onclick="saveBoards();">保存</button>
		</div>
<!-- 新增主机-->
		<div class="bottom" style="display:none;" id="bottom2">
			<div class="btm-bar">
				<div class="bar1">属性</div>
			</div>
			<div class="bt2">
				<div>编号&nbsp;:</div>
				<div><input type="text" id="machineBoxNo" placeholder="输入编号"/></div>
			</div>
			<div class="bt3">
				<div>名称&nbsp;:</div>
				<div><input type="text" id="machineBoxName" placeholder="输入名称"></div>
			</div>
			<div class="bt4">
				<div>备注&nbsp;:</div>
				<div><input type="text" id="machineBoxRemark" placeholder="输入备注"/></div>
			</div>
			<button class="b6" type="button" onclick="dissaveMachine()" style="margin-right:100px;">取消</button>
			<button  id="saveMachines" class="b6" type="button" >保存</button>
		</div>
		<!-- 编辑主机 -->
		<div class="bottom" style="display:none;" id="bottom4">
			<div class="btm-bar">
				<div class="bar1">属性</div>
			</div>
			<div class="bt2">
				<div>编号&nbsp;:</div>
				<div><input type="text" id="machineBoxNo2" placeholder="输入编号"/></div>
			</div>
			<div class="bt3">
				<div>名称&nbsp;:</div>
				<div><input type="text" id="machineBoxName2" placeholder="输入名称"></div>
			</div>
			<div class="bt4">
				<div>备注&nbsp;:</div>
				<div><input type="text" id="machineBoxRemark2" placeholder="输入备注"/></div>
			</div>
			<button class="b6" type="button" onclick="dissaveMachine()" style="margin-right:100px;">取消</button>
			<button  id="saveMachine" class="b6" type="button" onclick="editMachines();">保存</button>
		</div>
	</form>
</div>

</body>

<script>
$(document).bind('contextmenu',function(){
            return false;
       });
       $("body").click("mousedown",function(e){
           $(".rightKey").hide();
	});
loadOneImage('./images/topology/boarder.png');
var id = '[[${id}]]';
$("#returnUrl").val("new_machines_and_boardors?curId="+id);
var canvasData = {x:0 , y:0, width:Math.ceil(window.innerWidth-325), height:Math.ceil(window.innerHeight-52)};
init_canvas(canvasData ,1,lineEvent1 , lineEvent2 ,lineEvent3,iconEvent4,changeIndex);//初始化
drawCircles();
$("#pId").val(id);
var name;
var no;
var remark;
var AllData=[];
var url = '[[@{/physical_topology/get_by_id}]]';
$.ajax({
	url:url,
	type:"POST",
	dataType:"JSON",
	data:{id:id},
	async:false
}).done(function(res){
    if(res){
        name = res.data.name;
        no = res.no;
        remark = res.remark;
        var data = res.data;
        AllData=data;
        var machineBoxes = data.machineBoxes;
        var ids = [];
        if(machineBoxes&&machineBoxes.length>0){
            $.each(machineBoxes,function(k,v){
                addCanvasLevel1(k,null,v);
                ids.push(v.id);
                var boards = v.boards;
                if(boards&&boards.length>0){
                    $.each(boards,function(k1,v1){
                    	v1.machineBoxId=v.id
                    	addCanvasLevel2(k ,null,v1);
                    });
                   drawCircles();
                }
            });
        }
    }
});
	//新增主机
	function saveMachines (chuan1,chuan2) {	
		//$(".editPOP").show();
		$("#saveMachines").unbind('click');
		$("#saveMachines").bind('click', function(){
			
			var machineBoxe = {};
				
			machineBoxe.machineBoxNo = $("#machineBoxNo").val();
			machineBoxe.machineBoxName = $("#machineBoxName").val();
			machineBoxe.remark = $("#machineBoxRemark").val();
			machineBoxe.physicalTopology = {"id":id};
			machineBoxe.boards = [];
			
			machineBoxe = JSON.stringify(machineBoxe);
			$.ajax({
				url:'[[@{/machinebox/save}]]',
				data:machineBoxe,
                contentType:"application/json",
				dataType:"JSON",
				type:"POST",
				async:false
			}).done(function(data){
				if(data&&data.success){
					alert("保存成功");
					$("#bottom2").hide();
					$(".editPOP").hide();
					$(".table-box").css({"bottom":"0px"});
					isChooseOneObj = false;
					var curLevel1=addCanvasLevel1(chuan1 , chuan2 , data.data);
				}
			}).fail(function(data){
				alert("保存失败");
				$("#bottom2").hide();
				$(".editPOP").hide();
			});
			
		});
		 $("#machineBoxNo").val("");
		 $("#machineBoxName").val("");
		 $("#machineBoxRemark").val("");
	}
	
	//编辑主机
    function editMachines(){
        var flag = true;
        var curObj;
        for(var i=0;i<canvasAllLevel1.length;i++){
            var color = canvasAllLevel1[i].color;
            if(color=="#009EE7"){
                curObj = canvasAllLevel1[i];
                flag = false;
                break;
			}
		}
		if(flag){
            alert("请选择主机");
            return false;
		}
        if(curObj.param){
            $("#machineBoxNo2").val(curObj.machineBox.machineBoxNo);
            $("#machineBoxName2").val(curObj.machineBox.machineBoxName);
		}
        var machineBoxe = {};
		machineBoxe.machineBoxNo = $("#machineBoxNo2").val();
		machineBoxe.machineBoxName = $("#machineBoxName2").val();
		machineBoxe.remark = $("#machineBoxRemark2").val();
		machineBoxe.id = curObj.machineBox.id;
		machineBoxe.physicalTopology = {"id":id};
		machineBoxe.boards = curObj.machineBox.boards;
		
		machineBoxe = JSON.stringify(machineBoxe);
		$.ajax({
			url:'[[@{/machinebox/save}]]',
			data:machineBoxe,
            contentType:"application/json",
			dataType:"JSON",
			type:"POST",
			async:false
		}).done(function(data){
			if(data&&data.success){
				alert("修改成功");
				curObj.machineBox=data.data;
				curObj.title=data.data.machineBoxName;
				drawCircles(); 
				$("#bottom4").hide();
			}
		}).fail(function(data){
			alert("修改失败");
			$("#bottom4").hide();
		});
		 $("#machineBoxNo2").val("");
		 $("#machineBoxName2").val("");
		 $("#machineBoxRemark2").val("");
	}
    function dissaveMachine(){
		$("#bottom2").hide();
		$("#bottom4").hide();
		$(".editPOP").hide();
		$("#machineBoxNo").val("");
		 $("#machineBoxName").val("");
		 $("#machineBoxRemark").val("");
		 $("#machineBoxNo2").val("");
		 $("#machineBoxName2").val("");
		 $("#machineBoxRemark2").val("");
	}
	//新增板卡
	function newBoard(chuan1 , chuan2){
		cancelChoose();
		$("#bottom3").show();
		$(".editPOP").show();
		$("#bottom4").hide();
		$("#bottom1").hide();
		var machineBoxId=chuan1;
		$("#saveNewBoard").unbind('click');
		$("#saveNewBoard").on('click', function(){
			var board={}; 
			var curBoardType=$("#boardType").val();
			if(curBoardType=='0'){
				alert("请指定板卡类型");
				return false;
			}
			
			
			board.boardId= $("#boardId").val();
			board.boardName=$("#boardName").val();
			board.boardType=curBoardType;
			
			//board.remark=$("#remark").val();
			board.machineBox = {"id":canvasAllLevel1[machineBoxId].machineBox.id};
			board.cpus = [];
			board=JSON.stringify(board);
			$.ajax({
				url:'[[@{/board/save}]]',
				data:board,
	            contentType:"application/json",
				dataType:"JSON",
				type:"POST",
				async:false
			}).done(function(data){
				if(data&&data.success){
					data.data.machineBoxId = data.data.machineBox.id;
					var curLevle2=addCanvasLevel2(chuan1 , chuan2 , data.data);
					canvasAllLevel1[machineBoxId].machineBox.boards.push(curLevle2.board);
					alert("成功");
					$("#bottom3").hide();
					$(".editPOP").hide();
					isDragging = false;
					isChooseOneObj = false;
					moveAllObjs=[];
				}
			}).fail(function(data){
				alert(JSON.stringify(data));
				alert("失败");
				$("#bottom3").hide();
				$(".editPOP").hide();
			});
		});
		$("#boardId").val('');
		$("#boardName").val('');
		$("#boardType").val('');
	}
	//编辑板卡
    function saveBoards(){
        var flag = true;
        var curObj;
        for(var i=0;i<canvasAllLevel2.length;i++){
            var color = canvasAllLevel2[i].color;
            if(color=="#009EE7"){
                curObj = canvasAllLevel2[i];
                flag = false;
                break;
			}
		}
		if(flag){
            alert("请选择板卡");
            return false;
		}
		var board={}; 
		var curBoardType2=$("#boardType2").val();
		if(curBoardType2=='0'){
			alert("请指定板卡类型");
			return false;
		}
		
		board.boardId= $("#boardId2").val();
		board.boardName=$("#boardName2").val();
		board.boardType=curBoardType2;
		board.machineBox = {"id":canvasAllLevel1[curObj.pIndex].machineBox.id};
		board.id=curObj.board.id;
		//board.cpus = [];
		board.cpus=curObj.board.cpus;
		
		board=JSON.stringify(board);
		$.ajax({
			url:'[[@{/board/save}]]',
			data:board,
            contentType:"application/json",
			dataType:"JSON",
			type:"POST",
			async:false
		}).done(function(data){
			if(data&&data.success){
				//addCanvasLevel2(chuan1 , chuan2 , data.data);
				
				alert("成功");
				curObj.board=data.data;
				curObj.title2=data.data.boardName;
				drawCircles(); 

		        $("#bottom1").hide();
		        $(".table-box").css({"bottom":"0px"});
				//location.reload();
			}
		}).fail(function(data){
			alert("失败");
	        $("#bottom1").hide();
	        $(".table-box").css({"bottom":"0px"});
		});
        $("#boardId2").val("");
        $("#boardName2").val("");
        $("#boardType2").val("");
       //$("#remark2").val("");
	}
  
	function dissave(){
		$(".editPOP").hide();
        $("#bottom1").hide();
        $("#bottom3").hide();
        $(".table-box").css({"bottom":"0px"});
        $("#boardId2").val("");
        $("#boardName2").val("");
        $("#boardType2").val("");
        $("#boardId").val('');
		$("#boardName").val('');
		$("#boardType").val('');
       // $("#remark2").val("");
        $(".table-box").css({"bottom":"0px"});

	}
	//下一步
	function nextStep(){
		$("#id").val(id);
		$("#form1").attr({method:"GET",action:'[[@{/physical_link_bindors}]]'}).submit();
	}
	function showBig(){
		window.location.href="physical_monitors2"
	}
	
	//板卡交换位置 
	function changeIndex(select1,select2){
		if(select2!=null){
			$.ajax({
				url:'[[@{/board/move}]]',
				data:{boardId:select1.board.id,machineBoxId:select2.board.machineBoxId},
				dataType:"JSON",
				type:"POST",
			}).done(function(data){
				if(data&&data.success){				
					$.ajax({
						url:'[[@{/board/move}]]',
						data:{boardId:select2.board.id,machineBoxId:select1.board.machineBoxId},
						dataType:"JSON",
						type:"POST",
					}).done(function(data2){
						if(data2&&data2.success){
							alert("交换成功");
						}
					});
				}
			});
		}else{
			$.ajax({
				url:'[[@{/board/move}]]',
				data:{boardId:select1.board.id,machineBoxId:select1.board.machineBoxId},
				dataType:"JSON",
				type:"POST",
			}).done(function(data3){
				if(data3&&data3.success){
					//alert("移动成功");
				}
			});
		}
	}
</script>



<script type="text/javascript">
    function showView(){
		if(canvasAllLevel1.length==0){
			alert("请先添加主机");
			return false;
		}
		$("#id").val(id);
		$("#name").val(name);
        $("#form1").attr({action:'[[@{/physical_top_all_view}]]'}).submit();
    }
    function back(){
        window.location.href="physical_topology_library";
     }
</script>
</html>
